<template>
    <div class="condition-group">
        <div v-show="value.group.length > 1" class="line" ></div>
        <n-select v-show="value.group.length > 1" v-model:value="value.logic" placeholder="请选择" :disabled="disable"
            class="condition-group-logic" 
            :style="{
                'margin-bottom': renderPos(),
            }" :label-field="logicConfig.label" :value-field="logicConfig.value" :options="logic">
        </n-select>
        <div class="condition-group-content" >
            <div v-for="(f, fIndex) in value.group" :key="fIndex + 'group'"  class="condition-group-item"  :class="fIndex===0&&value.group.length===1?'no-top-line':''">
                <div v-if="f.boxType === 'single'" class="condition-single">
                    <conditionItem :modelValue="f" :f-index="fIndex"></conditionItem>
                    <div v-show="!disable" class="condition-single-opera">
                        <n-icon :size="18" :component="AddCircleSharp" @click="onAdd(fIndex, value.group)" />
                        <n-icon @click="onDel(fIndex, value.group)" :size="18" :component="CloseCircleSharp">
                        </n-icon>
                    </div>
                </div>
                <div v-if="f.boxType === 'group'" class="condition-group-sub">
                    <n-icon v-show="!disable" class="condition-group-del" :component="CloseCircleSharp" @click="onDel(fIndex, value.group)">
                    </n-icon>

                    <conditionGroup :modelValue="f"  @update:modelValue="(newVal) => value.group[fIndex] = newVal" :p-index="fIndex" @noData="onNoData"></conditionGroup>
                </div>
            </div>
        </div>
       
    </div>
</template>
<script lang="ts" setup>
import { computed, onMounted,ref } from 'vue'
import { logicOptions, defalutCondition } from './config'
import conditionItem from './conditionItem.vue'
import { AddCircleSharp,CloseCircleSharp } from '@vicons/ionicons5'
const props = defineProps({
    modelValue: {
        type: Object,
        default: () => {
            return {
                boxType: 'group',
                logic: 'and',
                group: [],
            }
        }
    },
    pIndex: {
        type: Number,
        default: -1
    },
    disable: {
        type: Boolean,
        default: false
    },
    logic: {
        type: Array,
        default: () => {
            return logicOptions
        }
    },
    logicConfig: {
        type: Object,
        default: () => {
            return {
                label: 'label',
                value: 'value'
            }
        }
    }
})
const text = ref('')
const value = computed({
    get() {
        return props.modelValue
    },
    set(val) {
        emits('update:modelValue', val)
    }
})

const emits = defineEmits(['update:modelValue', 'noData'])


let onAdd = (index: any, item: any[]) => {
    item.splice(index + 1, 0, { ...defalutCondition })
}

let onDel = (index: any, item: any[]) => {
    item.splice(index, 1)
    if (!item.length && props.pIndex !== -1) {
        emits('noData', props.pIndex)
    }
}
const renderPos = () => {
    let group = value.value.group
    let val = 0
    if (group?.length) {
        // 第一个不是分组 最后一个是分组
        if(group[group.length - 1].boxType === 'group'&&group[0].boxType !== 'group'){
            // 24 条件区 20 条件区内间隔
            val = group[group.length - 1].group.length *(24/4)-20/2
        }
        // 第一个是分组 最后一个不是分组
        if((group[group.length - 1].boxType !== 'group'&&group[0].boxType === 'group')){
            // 30  条件区内间隔 +条件区内间隔/2
            val = -(group[0].group.length*(24/2)+30/2)
        }
        
    }
    return val ? val+ 'px' : '-17px'
}

// 处理分组里所有项被删外层也要删除
const onNoData = (pIndex) => {
    value.value.group.splice(pIndex, 1)
}
</script>